<template>
  <!-- 巡检管理-巡检结果-TabThree -->
  <div class="inspection-result-tab-three">
    <a-card class="card card1" title="查询">
      <div class="input-box">
        <div class="item">
          <div class="text">报告名称</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.reportName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">任务名称</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.inspectionName"
          >
          </a-input>
        </div>
        <div class="item last-run-time">
          <div class="text">生成时间</div>
          <a-range-picker
            class="input picker"
            show-time
            v-model:value="formData.generationTime"
            @change="changeGenerationTime"
          />
        </div>
        <div class="item button-box">
          <a-button class="button" @click="clickReset">重置</a-button>
          <a-button type="primary" @click="clickQuery">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="card card2" title="列表">
      <template #extra>
        <div class="button-box">
          <a-button
            class="button"
            type="primary"
            @click="clickDownload('批量下载', undefined)"
            >批量下载</a-button
          >
        </div>
      </template>
      <a-table
        class="table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: tableSelectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <div class="operation">
              <span @click="clickDownload('下载', record)">下载</span>
            </div>
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="formData.pageNum"
        v-model:page-size="formData.pageSize"
        :total="formData.total"
        :show-total="total => `共 ${total} 条数据`"
        :show-size-changer="true"
        @change="changePagination"
      />
    </a-card>
  </div>
</template>
<script setup lang="ts">
  // 引入方法&组件
  import api from '@/axios/api.js'
  import { message } from 'ant-design-vue'
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import commonMethod from '@/common-method/common-method'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const columns = [
    { title: '报告名称', dataIndex: 'reportName' },
    { title: '任务名称', dataIndex: 'taskName' },
    { title: '报告类型', dataIndex: 'reportType' },
    { title: '生成时间', dataIndex: 'createTime' },
    { title: '操作', dataIndex: 'operation' },
  ] //列表配置
  const tableData = ref([]) //列表数据
  const tableSelectedRowKeys = ref([]) //表格选中的值
  const formData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    reportName: undefined,
    reportType: 0,
    inspectionName: undefined,
    organizationName: undefined,
    startTime: undefined,
    endTime: undefined,
    generationTime: undefined,
  })
  // const inspectionReportTypeList = ref([]) //巡检报告类型列表
  onMounted(() => {
    // getInspectionReportTypeList()
    getInspectionReportList(formData.value)
  })
  // 自定义方法
  //获取巡检报告列表
  const getInspectionReportList = async data => {
    const res = await api.getInspectionReportList(data)
    console.log('获取巡检报告列表', res)
    tableData.value = res.data.data.records.map(item => {
      return { ...item, key: item.fileId }
    })
    formData.value.total = res.data.data.total
  }
  //文件批量下载
  const batchDownloadFiles = async data => {
    const res = await api.batchDownloadFiles(data)
    console.log('文件批量下载', res)
    if (res.status === 200) {
      commonMethod.derive(res)
    } else {
      message.error(res.data.msg)
    }
  }
  //生成时间改变
  const changeGenerationTime = (dates, dateStrings) => {
    formData.value.startTime = dateStrings[0]
    formData.value.endTime = dateStrings[1]
  }

  //点击重置
  const clickReset = () => {
    formData.value = {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      reportName: undefined,
      reportType: 0,
      inspectionName: undefined,
      organizationName: undefined,
      startTime: undefined,
      endTime: undefined,
      generationTime: undefined,
    }
    getInspectionReportList(formData.value)
  }
  //点击查询
  const clickQuery = () => {
    getInspectionReportList(formData.value)
  }
  //表格选中改变
  const onSelectChange = selectedRowKeys => {
    tableSelectedRowKeys.value = selectedRowKeys
  }
  //分页改变
  const changePagination = (current, pageSize) => {
    formData.value.pageNum = current
    formData.value.pageSize = pageSize
    getInspectionReportList(formData.value)
  }
  //点击下载
  const clickDownload = (value, record) => {
    if (value === '下载') {
      batchDownloadFiles({
        fileIds: [record.fileId],
        fileName: record.fileName,
      })
    } else if (value === '批量下载') {
    }
  }
</script>
<style lang="less" scoped>
  .inspection-result-tab-three {
    .card1 {
      margin-bottom: (20 / @vh);
      .input-box {
        display: flex;
        flex-wrap: wrap;
        gap: (20 / @vw);
        @px: (15 / @vw);
        .item {
          display: flex;
          align-items: center;
          width: calc(25% - @px);
          .text {
            margin-right: (10 / @vw);
            width: (100 / @vw);
            text-align: right;
          }
          .input {
            flex: 1;
          }
          .button {
            margin-right: (10 / @vw);
          }
        }
        .last-run-time {
          flex: 1;
        }
        .button-box {
          width: 100%;
        }
      }
    }
    .card2 {
      .button-box {
        .button {
          margin-right: (10 / @vw);
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .table {
        margin-bottom: (20 / @vh);
        .operation {
          span {
            margin-right: (10 / @vw);
            color: @tc;
            cursor: pointer;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>
